import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    useWindowDimensions,
    Animated,
    ImageBackground,
    Image,
    Pressable,
    TouchableWithoutFeedback,
    ActivityIndicator,
    RefreshControl,
    FlatList,
    Dimensions,
    Linking,
    Alert
} from 'react-native';
import {router, Stack, useRouter} from "expo-router";
import AntDesign from '@expo/vector-icons/AntDesign';
import * as React from "react";
import {scaleSize} from "@/utils/screenSize";
import homeHeaderImg from "@/assets/images/homeImg/homeHeaderImg.png"
import LocationIconImg from "@/assets/images/homeImg/locationIcon.png"
import HomeSearchImg from "@/assets/images/homeImg/homeSearchImg.png"
import {useSafeAreaInsets} from "react-native-safe-area-context";
import { TabView, SceneMap } from 'react-native-tab-view';
import {useEffect, useRef, useState, useCallback} from "react";
import tabBg from "@/assets/images/homeImg/tabBg.png";
import TagBg from "@/assets/images/homeImg/tagBg.png";
import TagScrollView from "@/components/TagScrollView";
import Calendar from "@/components/Calendar/index"
import { format, getDay, addDays, startOfWeek} from "date-fns";
import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';
import SwiperActivityItemComponent from "@/components/SwiperActivityItem/index"
import HomeActivityListComponent from "@/components/HomeActivityList/index"
import avator from "@/assets/images/me/avator.png"
import {initSDK, platformID} from "@/utils/ImCommon"
import {getToken, calculateTotalPages } from "@/utils/index"
import Geolocation from 'react-native-geolocation-service';
import { PermissionsAndroid, Platform } from 'react-native';
import mapIcon from "@/assets/images/activityImg/mapIcon.png"

import CarouselComponent from "@/components/CarouselComponent/index"
import {useDispatch, useSelector} from "react-redux";
import {RootState} from "@/store";
import { getRecommendationsList } from "@/services/activityServices";
import { txApiKey } from "@/config/config-params";
import axios from "axios";
import {getGrainInfoDetail, getUserInfoDetail, setLocationInfo} from '@/store/slices/loginSlice'
import { getActivityTypeList } from "@/services/releaseServices";
import { useFocusEffect } from '@react-navigation/native';
import CustomFlatList from "@/components/CustomFlatList";
import { getSpaceRecommendListByRequest } from "@/services/spaceServices"
import { getCoummityRecommendListByRequest } from "@/services/registerCommumity"
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import {useGlobalEvent} from "@/hooks/im/useGlobalEvent";
import {getImTokenAdmin} from "@/services/login";
import {getOpenImSelfByToken} from "@/services/openImServices";


const { width } = Dimensions.get('window');
const images = [
    'https://via.placeholder.com/800x400.png?text=Slide+1',
    'https://via.placeholder.com/800x400.png?text=Slide+2',
    'https://via.placeholder.com/800x400.png?text=Slide+3',
];

const activityTypeList  = [
    '#飞盘啦',
    '#飞盘',
    '#飞盘',
    '#飞盘',
    '#飞盘',
]

const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];


const FirstRoute = () => {
    const [tagActive, setTagActive] = useState(0);
    const [headerTag, setHeaderTag] = useState(tags);
    const [showSelectTypeModel, setShowTypeSelectModel] = useState(false)
    const [tagIndex, setTagIndex] = useState(0);
    const [typeIndex, setTypeIndex] = useState(null);
    const [tmpTypeIndex, setTmpTypeIndex] = useState(null);
    const [year, setYear] = useState(new Date().getFullYear());
    const [month, setMonth] = useState(new Date().getMonth() + 1);
    const [activeDate, setActiveDate] = useState(null);

    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [refreshing, setRefreshing] = useState(false);
    const [triggerRefresh, setTriggerRefresh] = useState(false);
    const [page, setPage] = useState(1);
    const [refreshingText, setRefreshingText] = useState('下拉刷新');
    const [recommentList, setRecommentList] = useState<any[]>([]);
    const [tagList, setTagList] = useState([]);
    const [showTagList, setShowTagList] = useState(false);
    const [tempDate, setTempDate] = useState("");
    const [current, setCurrent] = useState(1);
    const [size, setSize] = useState(10);
    const [pages, setPages] = useState(0);

    const scrollY = new Animated.Value(0); // 用于跟踪滚动偏移



    const login = useSelector((state: RootState) => state.login);

    // 自定义加载图标组件
    const RefreshControlHeader = ({ refreshing, text }) => (
        refreshing &&  <View style={styles.refreshHeader}>
            {/*{refreshing && <Image source={require('./path/to/your/loading-icon.gif')} style={styles.refreshIcon} />} /!* 替换为你的加载图标 *!/*/}
            <Text style={styles.refreshText}>{text}</Text>
        </View>
    );

    useEffect(() => {
        getRecommentList()
    }, [])
    //
    //
    // useFocusEffect(
    //     useCallback(() => {
    //
    //         return () => {
    //             console.log('页面失去焦点时的清理逻辑');
    //         };
    //     }, [])
    // );


    // 初次加载数据
    useEffect( () => {
        // loadMoreData();
        getActivityTypeList()
            .then(res => {
                const itemEach = res.data?.typeList;
                const list: any = [{ label: "全部", value: "" }];
                itemEach.forEach((item: any, index: number) => {
                    const obj = {
                        label: item.name,
                        value: item.id,
                    };
                    list.push(obj);
                })
                console.log('list', list);
                setTimeout(() => {
                    setShowTagList(true);
                }, 0)
                setTagList(list)
            })
            .catch(err => {
                console.log('err', err);
            })
    }, []);

    useEffect(() => {
        const data = {
            // typeId: "2",
            province: login?.locationInfo?.province || "",
            city: login?.locationInfo?.city || "",
            current: 1,
            size: 10,
        };

        console.log('data', data);

        getRecommendationsList(data)
            .then((res) => {
                setRecommentList(res.data.items);
            })
            .catch(err => {
                console.log('err', err);
            })
    }, [login.locationInfo])

    useEffect(() => {
        if (triggerRefresh) {
            setTriggerRefresh(false); // Reset trigger
        }
    }, [triggerRefresh]);


    const getRecommentList = function (params?: any = {}, refreshing, setRefreshing, noMore) {
        const data = {
            province: login?.locationInfo?.province || "",
            city: login?.locationInfo?.city || '',
            current: 1,
            size: 10,
            ...params,
        };

        if (tagList.length > 0) {
            const findId = tagList[tagActive];
            Reflect.set(data, "typeId", findId.value)

            if (tagActive == 0) {
                delete data.typeId;
            };
        };

        if (activeDate) {
            const startDate = format(new Date(), "yyyy-MM-dd");
            const endDate =format(activeDate, "yyyy-MM-dd");
            Reflect.set(data, "startDate", startDate)
            Reflect.set(data, "endDate", endDate)
        };

        setCurrent(1);
        setSize(10);


        getRecommendationsList(data)
            .then((res) => {
                console.log('res.data.items', res.data.items);
                setRecommentList(res.data.items);
                const pagesCount = calculateTotalPages(res?.data?.counts, size);
                console.log('pagesCount', pagesCount);
                if (setRefreshing) {
                    setRefreshing(false);
                };
                setPages(pagesCount)
                noMore && noMore(true)
            })
            .catch(err => {
                if (setRefreshing) {
                    setRefreshing(false);
                };
                console.log('err', err);
            })
    };


    const loadingMoreRecommendList = function (params, loadingMore, setLoadingMore, noMore) {

        if (current == pages) {
            return noMore(false);
        };

        const data = {
            province: login?.locationInfo?.province || "",
            city: login?.locationInfo?.city || '',
            current: Number(current + 1),
            size: 10,
            ...params,
        };

        if (tagList.length > 0) {
            const findId = tagList[tagActive];
            Reflect.set(data, "typeId", findId.value)

            if (tagActive == 0) {
                delete data.typeId;
            };
        };

        if (activeDate) {
            const startDate = format(new Date(), "yyyy-MM-dd");
            const endDate =format(activeDate, "yyyy-MM-dd");
            Reflect.set(data, "startDate", startDate)
            Reflect.set(data, "endDate", endDate)
        }



        setLoadingMore(true);

        getRecommendationsList(data)
            .then((res) => {
                const tmp  = [...recommentList, ...res.data.items]
                setRecommentList(tmp);
                setCurrent(current + 1);
                if (setLoadingMore) {
                    setLoadingMore(false);
                };
            })
            .catch(err => {
                if (setLoadingMore) {
                    setLoadingMore(false);
                };
                console.log('err', err);
            })
    };

    useEffect(() => {
        if (tagList.length <= 0) return;
        const findId = tagList[tagActive];
        const params  = {
            typeId: findId.value
        }

        if (tagActive == 0) {
            delete params.typeId;
        };

        getRecommentList(  { ...params });
    }, [tagActive])

    useEffect(() => {
        setTimeout(() => {
            // router.push("/login")
        }, 100)
    }, [])


    // const handleRefresh = () => {
    //     setRefreshing(true);
    //     setRefreshingText('正在刷新...');
    //     setPage(1);
    //
    //     // 模拟网络请求来获取新数据
    //     setTimeout(() => {
    //         const newData = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`);
    //         setData(newData);
    //         setRefreshing(false);
    //         setRefreshingText('下拉刷新');
    //     }, 100);
    // };


    // const handleScroll = Animated.event(
    //     [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    //     {
    //         useNativeDriver: false,
    //         listener: event => {
    //             const offsetY = event.nativeEvent.contentOffset.y;
    //
    //             if (!refreshing) {
    //                 // 根据下拉距离更新文本
    //                 if (offsetY < -100) {
    //                     setRefreshingText('松开刷新'); // 超过 -100 的偏移量显示松开刷新
    //                 } else if (offsetY < 0) {
    //                     setRefreshingText('下拉刷新'); // 在 -100 到 0 之间时显示下拉刷新
    //                 }
    //             }
    //         },
    //     }
    // );

    const handleTagPress = (index: number) => {
        setTagActive(index);
    };

    useEffect(() => {
        if (showSelectTypeModel) {
            setTmpTypeIndex(typeIndex);
            setTempDate(activeDate);
        };
    }, [showSelectTypeModel])

    const resetType = () => {
        setTypeIndex(tmpTypeIndex);
        if (tempDate) {
            setActiveDate(tempDate);
        };
        setShowTypeSelectModel(false)
    };

    const onOkType = () => {
        setTypeIndex(typeIndex)
        setShowTypeSelectModel(false)
        if(typeIndex == 1) {
            if (!activeDate) return;
            const startDate = format(new Date(), "yyyy-MM-dd");
            const endDate =format(activeDate, "yyyy-MM-dd");
            const params = {
                startDate,
                endDate
            };
            getRecommentList(  { ...params });
        };
    };

    const addMonth = () => {
        if (month === 12) {
            setMonth(1);
            setYear(year + 1);
        } else {
            setMonth(month + 1);
        }
    };

    const subtractMonth = () => {
        if (month === 1) {
            setMonth(12);
            setYear(year - 1);
        } else {
            setMonth(month - 1);
        }
    };

    useEffect(() => {
        if (!activeDate) return;
        const startDate = format(new Date(), "yyyy-MM-dd");
        const endDate =format(activeDate, "yyyy-MM-dd");
        const params = {
            startDate,
            endDate
        };
        getRecommentList(  { ...params });

    }, [activeDate])

    const onChangeCalendar = function (item: any) {
        console.log('item', item.date);
        setActiveDate(item?.date);
    };

    const handleDate = function () {
        if (Number(format(activeDate, "yyyyMd")) == Number(format(new Date(), "yyyyMd"))) {
            return daysOfWeek[getDay(activeDate)] + " " + format(activeDate, "M")+ "." + format(activeDate, 'dd')
        } else {
            return daysOfWeek[getDay(new Date())] + " " + format(new Date(), "M")+ "." + format(new Date(), 'dd') + "-" + daysOfWeek[getDay(activeDate)] + " " + format(activeDate, "M")+ "." + format(activeDate, 'dd');
        };
    };

    const addDate = function (day) {
        // 3. 增加7天
        const newDateObj = addDays(new Date(), day);
        const formattedDate = format(newDateObj, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
        setActiveDate(formattedDate);
    };

    const onWeekSunday = function () {
        const today = new Date();
        const sunday = startOfWeek(today, { weekStartsOn: 0 }); // 0 表示一周从周日开始
        const nextSunday = addDays(sunday, 7);
        const formattedSunday = format(nextSunday, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
        console.log('formattedSunday', formattedSunday);
        setActiveDate(formattedSunday)
    };


    const renderFooter = () => {
        return (
            <View style={{ paddingVertical: 10, flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
                <ActivityIndicator size="small" />
                <Text style={{ textAlign: 'center', fontSize: 14, color: "#676978", marginLeft: 5, }}>疯狂加载中</Text>
            </View>
        );
    }


    return (
        <View style={[styles.scene, { backgroundColor: showSelectTypeModel ? "rgba(0,0,0,0.5)" : "#FFF" } ]}>
            <View>
                <ImageBackground source={TagBg}>
                    <View style={styles.tagContainer}>
                        {
                            showTagList && (
                                <TagScrollView
                                    tags={tagList}
                                    onTagPress={handleTagPress}
                                    activeIndex={tagActive}
                                />
                            )
                        }
                    </View>
                </ImageBackground>
            </View>
            <Pressable
                onPress={(event) => {
                    setShowTypeSelectModel(false)
                    setTypeIndex(tmpTypeIndex)
                    setActiveDate(tempDate);
                }}
                style={[{ backgroundColor: showSelectTypeModel ? "rgba(0,0,0,0.5)" : "#F7F7F7" }, showSelectTypeModel ? styles.isFullingHeight : null]}
                activeOpacity={1}
            >
                  <TouchableWithoutFeedback>
                      <View
                          style={{ backgroundColor: "#FFF", borderBottomLeftRadius: 10, borderBottomRightRadius: 10 }}
                      >
                          <View style={styles.selectTypeContainer}>
                              {
                                  false && (
                                      <TouchableOpacity onPress={() => {
                                          if (!showSelectTypeModel) {
                                              setShowTypeSelectModel(true);
                                          };
                                          setTagIndex(0)
                                      }}>
                                          <View style={styles.typeContainer}>
                                              {
                                                  typeIndex >= 0 &&  <Text style={styles.typeContainerText}>{ activityTypeList[typeIndex] }</Text>
                                              }
                                              {
                                                  typeIndex == null &&  <Text style={styles.typeContainerText}>类型</Text>
                                              }
                                              {
                                                  showSelectTypeModel && tagIndex == 0 ? (
                                                      <AntDesign name="caretup" size={6} color="#676978" style={styles.downIcon} />
                                                  ) : (
                                                      <AntDesign name="caretdown" size={6} color="#676978" style={styles.downIcon} />
                                                  )
                                              }
                                          </View>
                                      </TouchableOpacity>
                                  )
                              }
                              <TouchableOpacity
                                onPress={() => {
                                    if (!showSelectTypeModel) {
                                        setShowTypeSelectModel(true);
                                    } else {
                                        return setShowTypeSelectModel(false)
                                    };
                                    setTagIndex(1)
                                }}
                              >
                                  <View style={styles.typeContainer}>
                                      <Text style={styles.typeContainerText}>
                                          { activeDate ?
                                              handleDate()
                                              : "全部时间"
                                          }
                                      </Text>
                                      <AntDesign name="caretdown" size={6} color="#676978" style={styles.downIcon} />
                                  </View>
                              </TouchableOpacity>
                              {
                                  tagIndex == 1 && showSelectTypeModel && (
                                      <View style={styles.changeTimeTitleContainer}>
                                          <Text style={styles.changeTimeTitle}>{year}年 {month} 月</Text>
                                          <View style={styles.changeTimeIcon}>
                                              <TouchableOpacity onPress={subtractMonth}>
                                                  <AntDesign name="left" size={10} color="#9C9EAC" style={{ marginRight: 32 }} />
                                              </TouchableOpacity>
                                              <TouchableOpacity onPress={addMonth}>
                                                  <AntDesign name="right" size={10} color="#9C9EAC" />
                                              </TouchableOpacity>
                                          </View>
                                      </View>
                                  )
                              }
                          </View>
                          {
                              showSelectTypeModel && tagIndex == 0 && (
                                  <>
                                      <View>
                                          <View style={styles.activityTypeContainer}>

                                              {
                                                  activityTypeList.map((item: any, index: number) => {
                                                      return (
                                                          <TouchableOpacity onPress={() => setTypeIndex(index)}>
                                                              <View
                                                                  style={
                                                                      [
                                                                          typeIndex == index ?
                                                                              styles.activityTypeActivityItem :
                                                                              styles.activityTypeItem,
                                                                          { marginRight: (index % 4 == 0 && index !== 0) ? 0 : 20 }]}
                                                              >
                                                                  <Text
                                                                      style={
                                                                          [
                                                                              typeIndex == index ?
                                                                                  styles.activityTypeActivityItemText :
                                                                                  styles.activityTypeItemText
                                                                          ]
                                                                      }
                                                                  >{ item }</Text>
                                                              </View>
                                                          </TouchableOpacity>
                                                      )
                                                  })
                                              }
                                          </View>
                                      </View>
                                      <View style={styles.activityBtnContainer}>
                                          <TouchableOpacity onPress={resetType}>
                                              <View style={styles.resetBtn}>
                                                  <Text>重置</Text>
                                              </View>
                                          </TouchableOpacity>
                                          <TouchableOpacity style={styles.ok} onPress={onOkType}>
                                              <Text style={styles.okText}>确定</Text>
                                          </TouchableOpacity>
                                      </View>
                                  </>
                              )
                          }
                          {
                              tagIndex == 1 && showSelectTypeModel && (
                                  <View style={styles.dateContainer}>
                                      <View style={styles.longDateContainer}>
                                          <TouchableOpacity onPress={onWeekSunday}>
                                              <View style={styles.longDateItem}>
                                                  <Text style={styles.longDateItemText}>本周末</Text>
                                              </View>
                                          </TouchableOpacity>
                                          <TouchableOpacity onPress={() => addDate(6)}>
                                              <View style={styles.longDateItem}>
                                                  <Text style={styles.longDateItemText}>一周内</Text>
                                              </View>
                                          </TouchableOpacity>
                                          <TouchableOpacity onPress={() => addDate(29)}>
                                              <View style={styles.longDateItem}>
                                                  <Text style={styles.longDateItemText}>一月内</Text>
                                              </View>
                                          </TouchableOpacity>
                                      </View>
                                      <View style={{ marginTop: 5, borderBottomWidth: 0.5, borderBottomColor: "#E4E6EC" }}>
                                          <Calendar
                                              year={Number(year)}
                                              month={Number(month)}
                                              onChange={onChangeCalendar}
                                              activeDate={activeDate}
                                          />
                                      </View>
                                      <View style={styles.activityBtnContainer}>
                                          <TouchableOpacity onPress={resetType}>
                                              <View style={styles.resetBtn}>
                                                  <Text>重置</Text>
                                              </View>
                                          </TouchableOpacity>
                                          <TouchableOpacity style={styles.ok} onPress={onOkType}>
                                              <Text style={styles.okText}>确定</Text>
                                          </TouchableOpacity>
                                      </View>
                                  </View>
                              )
                          }
                      </View>
                  </TouchableWithoutFeedback>
            </Pressable>
            <View style={{ flex: 1 }}>
                <HomeActivityListComponent
                    list={recommentList}
                    pullLoadData={getRecommentList}
                    loadMoreList={loadingMoreRecommendList}
                />

                {/*<FlatList*/}
                {/*    data={data}*/}
                {/*    renderItem={({ item }) => <ActivityItem/>}*/}
                {/*    keyExtractor={(item, index) => index.toString()}*/}
                {/*    onEndReached={loadMoreData}*/}
                {/*    onEndReachedThreshold={0.5} // 当滚动到距离底部还有50%的时候触发*/}
                {/*    ListFooterComponent={renderFooter}*/}
                {/*    refreshControl={*/}
                {/*        <RefreshControl*/}
                {/*            refreshing={refreshing}*/}
                {/*            // onRefresh={handleRefresh} // 绑定刷新函数*/}
                {/*            title={refreshing ? '' : refreshingText} // 在正在刷新状态时不显示文本*/}
                {/*            titleColor="#333" // 设置提示文字颜色*/}
                {/*            tintColor="transparent" // 隐藏刷新指示器*/}
                {/*        />*/}
                {/*    }*/}
                {/*    onScroll={handleScroll}*/}
                {/*    onScrollEndDrag={onScrollEnd}*/}
                {/*    ListHeaderComponent={<RefreshControlHeader refreshing={refreshing} text={refreshingText} />}*/}
                {/*/>*/}
            </View>

        </View>
    )
};

const SecondRoute = () => {
    const tags1 = ['全部社群', '吃喝玩乐', '兴趣交友', '娱乐1','全部1', '娱乐','全部', '娱乐','全部', '娱乐','全部', '娱乐','全部', '娱乐'];

    const [headerTag, setHeaderTag] = useState(tags1);
    const [tagActive, setTagActive] = useState(0);
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [refreshing, setRefreshing] = useState(false);
    const [triggerRefresh, setTriggerRefresh] = useState(false);
    const [refreshingText, setRefreshingText] = useState('下拉刷新');

    const [loadingMore, setLoadingMore] = useState(false);
    const [page, setPage] = useState(1);
    const [totalPages, setTotalPages] = useState(0); //数据总量
    const [totalCount, setTotalCount] = useState(0); // 总分页数

    const scrollY = new Animated.Value(0); // 用于跟踪滚动偏移
    const login = useSelector((state: RootState) => state.login);

    useEffect(() => {
        fetchData(1, true);
    }, [])

    useEffect(() => {
        fetchData(1, true);
    }, [login.locationInfo])

    console.log('刷新')

    const fetchData = async (pageNum = 1, isRefreshing = false) => {
        if (isRefreshing) {
            setRefreshing(true);
        } else {
            setLoadingMore(true);
        };
        console.log('login', login)
        const requestData = {
            // province: login?.locationInfo?.province || "",
            // city: login?.locationInfo?.city || "",
            current: page,
            size: 10,
        };
        console.log('requestData', requestData);

        getCoummityRecommendListByRequest(requestData)
            .then(res => {
                const newData = res?.data?.items;
                console.log('res', res);
                setData(prevData => (isRefreshing ? newData : [...prevData, ...newData]));
                setPage(pageNum);
                setTotalPages(res?.data?.counts);
                setTotalCount(res?.data?.pages)
                setRefreshing(false);
                setLoadingMore(false);
            })
            .catch(err => {
                console.log('err', err);
            })

        // 模拟数据请求
        // setTimeout(() => {
        //     const newData = Array.from({ length: 10 }, (_, i) => `Item ${i + (pageNum - 1) * 10}`);
        //     setData(prevData => (isRefreshing ? newData : [...prevData, ...newData]));
        //     setPage(pageNum);
        //     setRefreshing(false);
        //     setLoadingMore(false);
        // }, 1000);
    };

    const onRefresh = () => {
        fetchData(1, true);
    };

    const onLoadMore = () => {
        if (page == totalCount) {
            setRefreshing(false);
            setLoadingMore(false);
            return
        };
        if (page < totalPages) {
            fetchData(page + 1);
        }
    };

    const goGroupDetail = function (groupId) {
        router.push(`/registerGroup/groupDetail/${groupId}`)
    };

    const goJoinGroupPages = function (groupId) {
        router.push(`/registerGroup/applyJoinGroup/${groupId}`)
    };

    const ActivityItem = ({ item }) => {
        const { type } = item;
        return (
            <View style={styles.groupContainer}>
                <View style={styles.groupStateContainer}>
                    <TouchableOpacity onPress={() => goGroupDetail(item.communityId)}>
                        <View style={styles.groupInfoWarp}>
                            <View style={styles.groupAvator}>
                                {/*<Text>ava</Text>*/}
                                <Image source={{ uri: item?.coverUrl }} style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.groupInfoCotent}>
                                <View>
                                    <Text style={styles.groupInfoTitle}>{ item?.name }</Text>
                                </View>
                                <View style={{ marginTop: 6 }}>
                                    <Text style={styles.groupInfoTotal}>成员数:{ item?.memberNum }人</Text>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>

                    {
                        item?.relationship == 1 && (
                            <TouchableOpacity onPress={() => goJoinGroupPages(item?.communityId)}>
                                <View style={styles.groupCreateBtn}>
                                    <Text style={styles.groupCreateBtnText}>加入</Text>
                                </View>
                            </TouchableOpacity>
                        )
                    }
                    {
                        item?.relationship == 2 && (
                            <TouchableOpacity onPress={goGroupDetail}>
                                <View style={styles.groupCreateBtn}>
                                    <Text style={styles.groupCreateBtnText}>审核中</Text>
                                </View>
                            </TouchableOpacity>
                        )
                    }

                    {
                        item?.relationship == 3 && (
                            <TouchableOpacity onPress={goGroupDetail}>
                                <View style={styles.groupCreateBtn}>
                                    <Text style={styles.groupCreateBtnText}>已加入</Text>
                                </View>
                            </TouchableOpacity>
                        )
                    }
                </View>
                {
                    item?.activityList.length > 0 && (
                        <View style={{ paddingHorizontal: 12 }}>
                            <CarouselComponent
                                loop
                                width={scaleSize(351)}
                                height={width * 0.32}
                                data={item?.activityList}
                                scrollAnimationDuration={1000}
                                initialScrollIndex={0}  // 设置初始滚动索引
                                renderItem={({ item }) => {
                                    return <SwiperActivityItemComponent showPrice={false} item={item}/>
                                }}
                            />
                        </View>
                    )
                }

            </View>
        )
    };

    const ActivityItemCallBack = useCallback(({ item }) => (
        <ActivityItem item={item}/>
    ), []);

    const handleTagPress = (index: number) => {
        setTagActive(index);
    };

    return (
        <View style={[styles.scene, { backgroundColor: '#F7F7F7' }]}>
            <View>
                <ImageBackground source={TagBg}>
                    <View style={styles.tagContainer}>
                        <TagScrollView
                            tags={headerTag}
                            onTagPress={handleTagPress}
                            activeIndex={tagActive}
                        />
                    </View>
                </ImageBackground>
            </View>
            <View style={{ marginTop: 10 }}>
                <CustomFlatList
                    data={data}
                    keyExtractor={(item, index) => index.toString()}
                    onRefresh={onRefresh}
                    onLoadMore={onLoadMore}
                    refreshing={refreshing}
                    loadingMore={loadingMore}
                    renderItem={({ item }) => <ActivityItemCallBack item={item} /> }
                    totalCount={totalCount}
                    currentPage={page}
                    totalPages={totalPages}
                />
                {/*<FlatList*/}
                {/*    data={data}*/}
                {/*    renderItem={({ item }) => <ActivityItemCallBack item={item} />}*/}
                {/*    keyExtractor={(item, index) => index.toString()}*/}
                {/*    onEndReached={loadMoreData}*/}
                {/*    onEndReachedThreshold={0.5} // 当滚动到距离底部还有50%的时候触发*/}
                {/*    ListFooterComponent={renderFooter}*/}
                {/*    refreshControl={*/}
                {/*        <RefreshControl*/}
                {/*            refreshing={refreshing}*/}
                {/*            // onRefresh={handleRefresh} // 绑定刷新函数*/}
                {/*            title={refreshing ? '' : refreshingText} // 在正在刷新状态时不显示文本*/}
                {/*            titleColor="#333" // 设置提示文字颜色*/}
                {/*            tintColor="transparent" // 隐藏刷新指示器*/}
                {/*        />*/}
                {/*    }*/}
                {/*    onScroll={handleScroll}*/}
                {/*    onScrollEndDrag={onScrollEnd}*/}
                {/*    ListHeaderComponent={<RefreshControlHeader refreshing={refreshing} text={refreshingText} />}*/}
                {/*/>*/}
            </View>
        </View>
    )
};

const koneRoute = () => {
    const [data, setData] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    const [loadingMore, setLoadingMore] = useState(false);
    const [page, setPage] = useState(1);
    const [totalPages, setTotalPages] = useState(0); //数据总量
    const [totalCount, setTotalCount] = useState(0); // 总分页数

    const login = useSelector((state: RootState) => state.login);

    const goSpaceDetail = function (id) {
        router.push(`/space/${id}`)
    };

    useEffect(() => {
        fetchData(1, true);
    }, [])

    useEffect(() => {
        fetchData(1, true);
    }, [login.locationInfo])

    const fetchData = async (pageNum = 1, isRefreshing = false) => {
        if (isRefreshing) {
            setRefreshing(true);
        } else {
            setLoadingMore(true);
        };
        console.log('login', login)
        const requestData = {
            province: login?.locationInfo?.province || "",
            city: login?.locationInfo?.city || "",
            current: page,
            size: 10,
        };
        console.log('requestData', requestData);

        getSpaceRecommendListByRequest(requestData)
            .then(res => {
                const newData = res?.data?.items;
                console.log('res', res);
                setData(prevData => (isRefreshing ? newData : [...prevData, ...newData]));
                setPage(pageNum);
                setTotalPages(res?.data?.counts);
                setTotalCount(res?.data?.pages)
                setRefreshing(false);
                setLoadingMore(false);
            })
            .catch(err => {
                console.log('err', err);
            })

        // 模拟数据请求
        // setTimeout(() => {
        //     const newData = Array.from({ length: 10 }, (_, i) => `Item ${i + (pageNum - 1) * 10}`);
        //     setData(prevData => (isRefreshing ? newData : [...prevData, ...newData]));
        //     setPage(pageNum);
        //     setRefreshing(false);
        //     setLoadingMore(false);
        // }, 1000);
    };

    const onRefresh = () => {
        fetchData(1, true);
    };

    const onLoadMore = () => {
        if (page == totalCount) {
            setRefreshing(false);
            setLoadingMore(false);
            return
        };
        if (page < totalPages) {
            fetchData(page + 1);
        }
    };

    const goSpaceMap = function () {
        router.push("/space/mapList")
    };

    const renderItem = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => goSpaceDetail(item?.spaceId)}>
                <View style={styles.koneItem}>
                    <View style={styles.koneAvator}>
                        <Image source={{ uri: item.coverUrl }} style={{ width: "100%", height: "100%" }} />
                    </View>
                    <View style={styles.koneContent}>
                        <Text style={styles.koneContentText}>{ item?.name }</Text>
                    </View>
                    <View>
                        <AntDesign name="right" size={8} color="#9C9EAC" />
                    </View>
                </View>
            </TouchableOpacity>
        )
    };

    return (
        <View style={styles.koneContainer}>
            <CustomFlatList
                data={data}
                keyExtractor={(item, index) => index.toString()}
                onRefresh={onRefresh}
                onLoadMore={onLoadMore}
                refreshing={refreshing}
                loadingMore={loadingMore}
                renderItem={renderItem}
                totalCount={totalCount}
                currentPage={page}
                totalPages={totalPages}
            />
            {
                data.length > 0 && (
                    <TouchableOpacity onPress={goSpaceMap} activeOpacity={1}>
                        <View style={styles.lookMapWrap}>
                            <View style={styles.mapIcon}>
                                <Image source={mapIcon} style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.mapWrap}>
                                <Text style={styles.mapWrapText}>查看地图</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                )
            }

        </View>
    )
};

const tags = ['全部', '娱乐', '全部', '娱乐','全部', '娱乐','全部', '娱乐','全部', '娱乐','全部', '娱乐','全部', '娱乐'];

const tags2 = ['全部2', '娱乐2', '全部2', '娱乐2','全部2', '娱乐','全部', '娱乐','全部', '娱乐','全部', '娱乐','全部', '娱乐'];

export default function HomeScreen() {

    const [index, setIndex] = useState(1);
    const [isLogin, setIsLogin] = useState(false);

    const insets = useSafeAreaInsets();
    const dispatch = useDispatch();
    useGlobalEvent();

    const login = useSelector((state: RootState) => state.login);

    const router = useRouter();
    const layout = useWindowDimensions();
    const itemWidth = 60;
    const underlineWidth = 18;
    const underlineOffset = useRef(new Animated.Value((itemWidth * index) + (itemWidth - 18) / 2)).current;  // 下划线偏移的动画值


    const animatedValue1 = useRef(new Animated.Value(14)).current;
    const animatedValue2 = useRef(new Animated.Value(14)).current;
    const animatedValue3 = useRef(new Animated.Value(14)).current;

    // const insets = useSafeAreaInsets(); // 获取安全区内边距

    const checkHasTokenStatus = async () => {
        const token = await getToken();
        console.log('token', token);
        if (token) {
            setIsLogin(true);
        };
    };

    // useEffect(() => {
    //     getImTokenAdmin()
    //         .then(res => {
    //             const adminToken = res?.data?.imAdminToken;
    //             getOpenImSelfByToken(adminToken, login?.userInfo?.uid, platformID)
    //                 .then(r => {
    //                     console.log('r', r.data.token);
    //                     initSDK(login?.userInfo?.uid, r.data.token);
    //                 })
    //                 .catch(e => {
    //                     console.log('e', e);
    //                 });
    //             console.log('getImTokenAdmingetImTokenAdmingetImTokenAdmin', res);
    //         })
    //         .catch(err => {
    //             console.log('err', err);
    //         })
    //
    // }, [login.userInfo])

    useFocusEffect(
        useCallback(() => {
            checkHasTokenStatus();
            dispatch(getUserInfoDetail());
            dispatch(getGrainInfoDetail());
            // setIndex(index)
            return () => console.log("Tab unfocused");
        }, [])
    );



    const requestLocationPermission = async () => {
        if (Platform.OS === 'android') {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                {
                    title: 'Location Permission',
                    message: 'We need access to your location to show you...',
                    buttonNeutral: 'Ask Me Later',
                    buttonNegative: 'Cancel',
                    buttonPositive: 'OK',
                }
            );
            return granted === PermissionsAndroid.RESULTS.GRANTED;
        }
        return true; // iOS always grants permission via settings
    };

    const getLocation = async () => {
        const hasPermission = await requestLocationPermission();
        if (!hasPermission) {
            router.push("/searchCity")
            console.log('Location permission denied');
            return;
        }

        // console.log('locationInfolocationInfo', login.locationInfo)


        Geolocation.getCurrentPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                if (login.locationInfo?.ad_info) return;
                axios.get(`https://apis.map.qq.com/ws/geocoder/v1?key=${txApiKey}&location=${latitude},${longitude}&get_poi=1`)
                    .then(res => {
                        const data = res.data.result;
                        console.log('res', res.data);
                        if (res.data.status !== 0) {
                            router.push("/searchCity")
                            return;
                        };
                        const locationData = {
                            province: data?.ad_info?.province || data?.address_component?.nation,
                            city: data?.ad_info?.city || data?.address_component?.locality,
                            location: data?.location,
                        };

                        if (res.data.message == 'Success') {
                            dispatch(setLocationInfo({ locationInfo: locationData }));
                        };

                    })
                    .catch(err => {
                        console.log('err', err);
                    })
            },
            (error) => {
                router.push("/searchCity")
                console.warn(error.message);
            },
            { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
        );
    };

    useEffect(() => {
        getLocation();
    }, [])


    useEffect(() => {
        Animated.timing(animatedValue1, {
            toValue: index === 0 ? 18 : 14,
            duration: 200,
            useNativeDriver: false,
        }).start();
        setTimeout(() => {
            // goRelease();
        }, 100)
    }, [])

    const goLogin = function () {
        router.push("/login")
    };

    const goSearchCity = function () {
        router.push("/searchCity");
    };

    const goSearchActivity = function () {
        router.push(`/searchActivity/${index}`);
    };

    const goRelease = function () {
        router.push("/releaseImg");
    };


    const [routes] = React.useState([
        { key: 'first', title: 'Tab 1' },
        { key: 'second', title: 'Tab 2' },
        { key: 'three', title: 'Tab 3' },
    ]);


    const renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
        three: koneRoute,
    });

    useEffect(() => {
        Animated.timing(animatedValue1, {
            toValue: index === 0 ? 18 : 16,
            duration: 200,
            useNativeDriver: false,
        }).start();

        Animated.timing(animatedValue2, {
            toValue: index === 1 ? 18 : 16,
            duration: 200,
            useNativeDriver: false,
        }).start();

        Animated.timing(animatedValue3, {
            toValue: index === 2 ? 18 : 16,
            duration: 200,
            useNativeDriver: false,
        }).start();

        setIndex(index);
    }, [])

    const handleTabPress = (index) => {

        Animated.timing(animatedValue1, {
            toValue: index === 0 ? 18 : 16,
            duration: 200,
            useNativeDriver: false,
        }).start();

        Animated.timing(animatedValue2, {
            toValue: index === 1 ? 18 : 16,
            duration: 200,
            useNativeDriver: false,
        }).start();

        Animated.timing(animatedValue3, {
            toValue: index === 2 ? 18 : 16,
            duration: 200,
            useNativeDriver: false,
        }).start();

        setIndex(index);

        // 计算偏移量，确保下划线居中
        const offset = (itemWidth * index) + (itemWidth - underlineWidth) / 2;

        Animated.spring(underlineOffset, {
            toValue: offset,  // 偏移量
            useNativeDriver: true,
        }).start();
    };

    const checkLocationPermission = async () => {
        const permission = Platform.OS === 'ios'
            ? PERMISSIONS.IOS.LOCATION_WHEN_IN_USE
            : PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION;

        const result = await check(permission);

        if (result === RESULTS.GRANTED) {
            console.log("定位权限已授权");
            getLocation();
            return true;
        } else if (result === RESULTS.DENIED) {
            // 请求权限
            const requestResult = await request(permission);
            if (requestResult === RESULTS.GRANTED) {
                getLocation();
                return true;
            }
            return false;
        } else {
            // 用户拒绝，无法再次请求，引导去设置
            Alert.alert(
                "需要定位权限",
                "请在设置中开启定位权限，以使用该功能。",
                [
                    { text: "取消", style: "cancel" },
                    { text: "去设置", onPress: () => Linking.openSettings() }
                ]
            );
            return false;
        }
    };

    return (
        <>
            <View style={styles.headerTabContainer}>
                <ImageBackground source={homeHeaderImg} style={{ paddingTop: insets.top }} >
                    <View style={[styles.homeHeaderContainer]}>
                        <View style={styles.locationContainer}>
                            <View style={styles.locationIcon}>
                                <Image source={LocationIconImg} style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View>

                            </View>
                            {
                                login?.locationInfo?.city && (
                                    <TouchableOpacity onPress={goSearchCity}>
                                        <View style={[styles.city, { maxWidth: 60, }]}>
                                            <Text style={{ fontSize: 14 }} numberOfLines={1}>{ login?.locationInfo?.city }</Text>
                                        </View>
                                    </TouchableOpacity>

                                )
                            }
                            {
                                !login?.locationInfo?.city && (
                                    <TouchableOpacity onPress={checkLocationPermission}>
                                        <View style={[styles.city, { maxWidth: 60, }]}>
                                            <Text style={{ fontSize: 14 }} numberOfLines={1}>获取定位</Text>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                            <AntDesign name="caretdown" size={7} color="#2A2B30" style={{ marginBottom: 2}}/>
                        </View>
                        <View style={styles.headerTab}>
                           <View style={{ width: 240, flexDirection: "row", position: "relative" }}>
                              <TouchableOpacity onPress={() => handleTabPress(0)}>
                                  <View style={[styles.headerTabItem]}>
                                      <Animated.Text style={
                                          [
                                              styles.headerTabItemText,
                                              {
                                                  fontSize: animatedValue1,
                                                  fontWeight: index === 0 ? 'bold' : 400,
                                                  paddingTop: index === 0 ? 0 : 2, // lineHeight与fontSize一致
                                                  color: index == 0 ? "#2A2B30" : "#676978",
                                              }
                                          ]}
                                      >
                                          活动
                                      </Animated.Text>
                                      {
                                          index == 0 && (
                                              <View style={styles.headerTabActiveBg}>
                                                  <Image source={tabBg} style={{ width: "100%", height: "100%" }} />
                                              </View>
                                          )
                                      }
                                  </View>
                              </TouchableOpacity>
                               <TouchableOpacity onPress={() => handleTabPress(1)}>
                                   <View style={[styles.headerTabItem]}>
                                       <Animated.Text style={
                                           [
                                               styles.headerTabItemText,
                                               {
                                                   fontSize: animatedValue2,
                                                   paddingTop: index === 1 ? 0 : 2, // lineHeight与fontSize一致
                                                   fontWeight: index === 1 ? 'bold' : 400,
                                                   color: index == 1 ? "#2A2B30" : "#676978",
                                               }
                                           ]}>
                                           社群
                                       </Animated.Text>
                                       {
                                           index == 1 && (
                                               <View style={styles.headerTabActiveBg}>
                                                   <Image source={tabBg} style={{ width: "100%", height: "100%" }} />
                                               </View>
                                           )
                                       }
                                   </View>
                               </TouchableOpacity>
                               <TouchableOpacity onPress={() => handleTabPress(2)}>
                                   <View style={styles.headerTabItem}>
                                       <View style={[styles.headerTabItem]}>
                                           <Animated.Text
                                               style={
                                                   [
                                                       styles.headerTabItemText,
                                                       {
                                                           fontSize: animatedValue3,
                                                           fontWeight: index === 2 ? 'bold' : 400,
                                                           paddingTop: index === 2 ? 0 : 2, // lineHeight与fontSize一致
                                                           color: index == 2 ? "#2A2B30" : "#676978"
                                                       }
                                                   ]}
                                           >
                                               空间
                                           </Animated.Text>
                                           {
                                               index == 2 && (
                                                   <View style={styles.headerTabActiveBg}>
                                                       <Image source={tabBg} style={{ width: "100%", height: "100%" }} />
                                                   </View>
                                               )
                                           }
                                       </View>
                                   </View>
                               </TouchableOpacity>
                               <Animated.View
                                   style={[
                                       styles.underline,
                                       {
                                           width: underlineWidth,
                                           transform: [{ translateX: underlineOffset }],
                                       },
                                   ]}
                               />
                           </View>
                        </View>
                      <TouchableOpacity onPress={goSearchActivity}>
                          <View style={styles.searchIcon}>
                              <Image source={HomeSearchImg} style={{ width: "100%", height : '100%' }}/>
                          </View>
                      </TouchableOpacity>
                    </View>
                </ImageBackground>
            </View>



            <GestureHandlerRootView style={{ flex: 1 }}>
                <TabView
                    navigationState={{ index, routes }}
                    renderScene={renderScene}
                    onIndexChange={handleTabPress}
                    renderTabBar={() => null}
                />
            </GestureHandlerRootView>

            {
                !isLogin && <View style={styles.unLoginContainer}>
                    <View>
                        <Text style={styles.goLoginTitle}>终于等到你，快来登录吧</Text>
                    </View>
                    <TouchableOpacity onPress={goLogin}>
                        <View style={styles.goLogin}>
                            <Text style={styles.goLoginText}>马上登录</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            }

        </>
    );
}

const styles = StyleSheet.create({
    homeHeaderContainer: {
        flexDirection: "row",
        paddingLeft: 12,
        paddingRight: 12,
        justifyContent: "space-between",
        paddingBottom: 10,
    },
    headerTabContainer: {

    },
    locationContainer: {
        flexDirection: "row",
        alignItems: "center",
        // justifyContent: "center"
        // backgroundColor: "red",
    },
    locationIcon: {
        width: 13,
        height: 13
    },
    city: {
        marginLeft: 1,
    },
    headerTab: {
        flexDirection: "row",
        justifyContent: "center",
        position: "relative",
        paddingLeft: scaleSize(25),

        // width: scaleSize(300),
        // paddingLeft: 25,
    },
    headerTabItem: {
        width: 60,
        height: 20,
        // backgroundColor: "red",
    },
    headerTabItemText: {
        textAlign: "center",
        fontSize: 16,
    },
    scene: {
        flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
    },
    tabBar: {
        flexDirection: 'row',
        backgroundColor: 'white',
        position: 'relative', // 需要相对定位来放置指示器
        width:scaleSize(350),
        margin: "auto",
    },
    tabItem: {
        flex: 1,
        alignItems: 'center',
        paddingTop: 10,
        paddingBottom: 9,
        fontSize: 14,
        color: "#2A2B30",
    },
    indicator: {
        position: 'absolute',
        height: 3,
        backgroundColor: '#EC6138',
        bottom: 0,
        borderRadius: 5,
    },
    tabHeader: {
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderBottomColor: "#F1F2F5",
        marginBottom: 12,
    },
    activeTab: {
        borderBottomWidth: 2,
        borderBottomColor: '#000',
    },
    searchIcon: {
        width: 17,
        height: 17,
    },
    underline: {
        height: 2,
        backgroundColor: '#000',
        position: 'absolute',
        bottom: -5,
        left: 0,
        borderRadius: 30,
    },
    headerTabActiveBg: {
        width: scaleSize(35),
        overflow: "hidden",
        height: 9,
        position: "absolute",
        top: 12,
        left: 13,
    },
    tagContainer: {
       // height: 32,
        flexDirection: "row",
        alignItems: "center",
        paddingLeft: 12,
    },
    selectTypeContainer: {
        flexDirection: "row",
        paddingLeft: 12,
        paddingTop: 10,
        paddingBottom: 10,
        // backgroundColor: "#F7F7F7"
    },
    typeContainer: {
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: "row",
        alignItems:"center",
        justifyContent: "center",
        borderWidth: 1,
        borderRadius: 12,
        borderStyle: "solid",
        borderColor: "#E4E6EC",
        marginRight: 10,
    },
    typeContainerText: {
        color: "#676978",
        fontSize: 12,
    },
    downIcon: {
        marginLeft: 2,
    },
    activityTypeContainer: {
        flexDirection: "row",
        flexWrap: "wrap",
        marginLeft: 12,
        marginRight: 12,
        backgroundColor: "#fff",
        borderBottomWidth: 0.5,
        borderColor: "#E4E6EC",
        borderStyle: "solid"
    },
    activityTypeItem: {
        // paddingLeft: 20,
        // paddingRight: 20,
        width: 72,
        paddingTop: 8,
        paddingBottom: 8,
        borderStyle: "solid",
        borderWidth: 1,
        borderRadius: 20,
        borderColor: "#E4E6EC",
        marginBottom: 12,
    },
    activityTypeActivityItem: {
        width: 72,
        paddingTop: 8,
        paddingBottom: 8,
        borderStyle: "solid",
        borderWidth: 1,
        borderRadius: 20,
        borderColor: "#EC6138",
        marginBottom: 12,
        backgroundColor: "#FFF6F4",
    },
    activityTypeItemText: {
        textAlign: "center",
        color: "#2A2B30",
        fontSize: 12,
    },
    activityTypeActivityItemText: {
        textAlign: "center",
        color: "#EC6138",
        fontSize: 12,
    },
    activityBtnContainer: {
        marginLeft: 12,
        marginRight: 12,
        marginTop: 12,
        paddingBottom: 12,
        flexDirection: "row",
    },
    resetBtn: {
        width: 99,
        height: 40,
        marginRight: 12,
        borderStyle: "solid",
        borderWidth: 1,
        borderRadius: 20,
        flexDirection: "row",
        justifyContent: "center",
        alignItems:"center",
        borderColor: "#E4E6EC"
    },
    ok: {
        flex: 1,
        borderStyle: "solid",
        borderWidth: 1,
        borderRadius: 20,
        flexDirection: "row",
        justifyContent: "center",
        alignItems:"center",
        borderColor: "#E4E6EC",
        backgroundColor: "#EC6138",
    },
    okText: {
        color: "#fff",
    },
    dateContainer: {
        marginLeft: 12,
        marginRight: 12,
    },
    longDateContainer: {
        flexDirection: "row",
        justifyContent: "space-between"
    },
    longDateItem: {
        paddingTop: 6,
        paddingBottom: 6,
        paddingLeft: 30,
        paddingRight: 30,
        backgroundColor: "#F7F8F9",
        borderRadius: 20,
    },
    longDateItemText: {
        fontSize: 12,
        // fontWeight: 400,
    },
    changeTimeTitleContainer: {
        flexDirection: "row",
        alignItems: "center",
        flex: 1,
        paddingRight: 12,
        justifyContent: "flex-end"
    },
    changeTimeIcon: {
        flexDirection:"row",
    },
    changeTimeTitle: {
        fontSize: 12,
        color: "#676978",
        marginRight: 14,
    },
    unLoginContainer: {
        position: "absolute",
        bottom: 0,
        width: "100%",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: "#FFEFEB",
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 12,
        paddingRight: 12,
    },
    goLoginTitle: {
        fontSize: 14,
        color: "#EC6138"
    },
    goLogin: {
        width: 72,
        height: 24,
        backgroundColor: "#EC6138",
        borderRadius: 12,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    goLoginText: {
        color: "#fff",
        fontSize: 12,
    },
    activityContainer: {
        // flexDirection: "row",
        marginLeft: 12,
        marginRight: 12,
        height: scaleSize(164),
        backgroundColor: "#fff",
        borderRadius: 8,
        marginBottom: 12,
    },
    activitybody: {
        padding: 12,
        flexDirection: "row",

    },
    activityBanner: {
        position: "relative",
        width: scaleSize(110),
        height: scaleSize(110),
        // backgroundColor: "blue",
        borderRadius: 4,
    },
    activityContent: {
        marginLeft: 10,
    },
    activityTitleWarp: {
        width: scaleSize(192),
    },
    activityTitle: {
        fontSize: 16,
        fontWeight: "bold",
        color: "#2A2B30",
        letterSpacing: 1.2,
        lineHeight: 22,
    },
    addressIcon: {
        width: scaleSize(11),
        height: scaleSize(11),
    },
    activityTag: {
        width: scaleSize(28),
        height: scaleSize(12),
        backgroundColor: "rgba(255,70,0,0.1)",
        borderRadius: 10,
        marginTop: 6,
    },
    activityTagText: {
        fontSize: 8,
        color: "#EC6138",
        textAlign: "center",
        lineHeight: 12,
    },
    activityDateWarp: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 6,
        marginBottom: 6,
    },
    activityDate: {
        marginLeft: 3,
        fontSize: 12,
        color: "#676978"
    },
    activityAdressWarp: {
        flexDirection: "row",
        alignItems: "center",
    },
    activityAdress: {
        fontSize: 12,
        color: "#676978",
        marginLeft: 3,
    },
    joinList: {
        flexDirection: "row",
        alignItems: "center",
    },
    activityFooter: {
        flexDirection: "row",
        paddingLeft: 12,
        paddingRight: 12,
        justifyContent: "space-between",
        alignItems: "center"
    },
    joinAvator: {
        width: scaleSize(20),
        height: scaleSize(20),
        backgroundColor: "red",
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 1,
    },
    maLeft: {
        marginLeft: -7,
    },
    joinListWarp: {
        flexDirection: "row",
    },
    joinContent: {
        marginLeft: 10,
    },
    joinContentText: {
        color: "#333",
        fontSize: 12,
        fontWeight: "bold"
    },
    activityMoney: {
        width: 56,
        height: 24,
        backgroundColor: "#EC6138",
        borderRadius: 12,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    activityMoneyText: {
        color: "#fff",
        fontSize: 18,
    },
    activityTagWarp: {
        position: "absolute",
        width: 30,
        height: 20,
        // backgroundColor: "red",
    },
    tagText: {
        fontSize: 10,
        textAlign: "center",
        color: "#fff",
        marginTop: 1,
    },
    refreshHeader: {
        alignItems: 'center',
        padding: 20,
    },
    refreshIcon: {
        width: 12,
        height: 12,
        marginBottom: 10,
    },
    refreshText: {
        fontSize: 12,
        color: '#333',
    },
    isFullingHeight: {
        height: "100%",
    },
    groupStateContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",

        paddingRight: 12,
    },
    groupInfoWarp: {
        flexDirection: 'row',
        alignItems: "center",
        marginTop: 16,
        marginBottom: 16,
        marginLeft: 24,
        marginRight: 12,
    },
    groupAvator: {
        width: scaleSize(52),
        height: scaleSize(52),
        borderRadius: 50,
        overflow: "hidden",
    },
    groupInfoCotent: {
        marginLeft: 10,
    },
    groupInfoTitle: {
        // fontWeight: "bold",
    },
    groupInfoTotal: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    groupOut: {
        width: 56,
        height: 26,
        borderColor: "#EC6138",
        borderWidth: 1,
        borderRadius: 13,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    groupOutText: {
        color: "#EC6138",
        fontSize: 12,
    },

    groupCreateBtn: {
        width: 56,
        height: 26,
        backgroundColor: "#EC6138",
        borderRadius: 13,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    groupCreateBtnText: {
        color: "#fff",
        fontSize: 12,
    },
    groupContainer: {
        marginHorizontal: 12,
        backgroundColor:"#fff",
        marginBottom: 12,
        borderRadius: 8,
    },
    koneContainer: {
        margin: 12,
        height: "100%",
    },
    koneItem: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#fff",
        paddingVertical: 12,
        paddingHorizontal: 16,
        borderRadius: 8,
        marginBottom: 12,
    },
    koneAvator: {
        width: 52,
        height: 52,
        borderRadius: 50,
        overflow: "hidden",
    },
    koneContent: {
        flex: 1,
        marginLeft: 10,
        maxWidth: 250
    },
    koneContentText: {
        fontSize: 12,
        color: "#2A2B30"
    },
    lookMapWrap: {
        flexDirection: "row",
        alignItems: "center",
        position: "absolute",
        bottom: 30,
        right: 0,
        padding: 12,
        backgroundColor: "#fff",
        borderRadius: 19,
        shadowColor: 'rgba(149, 157, 165, 1)', // 阴影颜色
        shadowOffset: { width: 0, height: 8 }, // 偏移
        shadowOpacity: 0.4, // 透明度
        shadowRadius: 24, // 模糊半径
        elevation: 10, // Android 的阴影效果
        // borderRadius: 10, // 根据需要设置圆角
    },
    mapIcon: {
        width: 14,
        height: 14,
    },
    mapWrap: {
        marginLeft: 4,
    },
    mapWrapText: {
        fontSize: 14,
        color: "#676978"
    },
});
